<template>
  <div class="Header">
    <div class="Header_left">
      <!-- 展开闭合左边导航栏 -->
      <aside-icon />
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <transition-group name="breadcrumb">
          <el-breadcrumb-item
            v-for="(item, index) in breadcrumbList"
            :key="item.path"
            :to="
              index < breadcrumbList.length - 1 &&
              item.redirect.split('/')[1] != $route.path.split('/')[1] && {
                path: item.path,
              }
            "
            >{{ item.meta.title }}
          </el-breadcrumb-item>
        </transition-group>
      </el-breadcrumb>
    </div>
  </div>
</template>

<script>
import AsideIcon from "@/components/AsideIcon";
export default {
  data() {
    return {
      breadcrumbList: [],
    };
  },

  components: {
    AsideIcon,
  },
  methods: {
  },
};
</script>

<style lang="scss" scoped>
.Header {
  display: flex;
  align-items: center;
  height: 100%;
  &_left {
    display: flex;
    align-items: center;
    .el-breadcrumb {
      margin-left: 5px;
      flex-shrink: 0;
    }
  }
}
</style>
<style>
/* 头部搜索款变圆角边框 */
.el-autocomplete input {
  border-radius: 16px;
}
@media screen and (max-width: 800px) {
  /* 头部搜索框隐藏 */
  .el-autocomplete {
    display: none !important;
  }
}
@media screen and (max-width: 700px) {
  /* 面包屑导航隐藏 */
  .Header .Header_left .el-breadcrumb {
    display: none;
  }
  /* 左侧导航栏隐藏 */
  .el-aside > .Aside {
    display: none;
  }
  .Header .Header_left .AsideIcon {
    display: none;
  }
  .Main .AsideIcon {
    display: block !important;
  }
}
</style>
